<template>
  <div class="page">
    <!-- <a-button @click="show">测试</a-button> -->
    <a-tabs
      class="tabs"
      :style="{ background: token.colorBgBase }"
      v-model:activeKey="activeKey"
      @change="tabChange"
    >
      <!-- <a-tab-pane key="Manage" tab="管理方案"></a-tab-pane> -->
      <a-tab-pane key="Health" tab="健康处方"></a-tab-pane>
      <a-tab-pane key="Diet" tab="饮食方案"></a-tab-pane>
      <a-tab-pane key="Sport" tab="运动方案"></a-tab-pane>
      <a-tab-pane key="Education" tab="健康宣教"></a-tab-pane>
      <a-tab-pane key="Follow" tab="健康随访"></a-tab-pane>
      <a-tab-pane key="Monitor" tab="健康监测"></a-tab-pane>
      <a-tab-pane key="Medication" tab="用药提醒"></a-tab-pane>
      <a-tab-pane key="Remind" tab="就诊提醒"></a-tab-pane>
      <a-tab-pane key="Warning" tab="预警通知"></a-tab-pane>
      <!-- <a-tab-pane key="Editor" tab="富文本编辑器"></a-tab-pane> -->
    </a-tabs>
    <div class="main">
      <Transition name="page" mode="out-in">
        <component class="content" :is="tabs[activeKey]"></component>
      </Transition>
    </div>
  </div>
</template>

<script lang="ts" setup name="模板管理">
import { ref, onMounted } from 'vue'
import { setUrlParams } from '@/utils/tools'
import { useRoute } from 'vue-router'
// import Manage from './Manage.vue'
import Health from './Health.vue'
import Education from './Education.vue'
import Follow from './Follow.vue'
import Monitor from './Monitor.vue'
import Remind from './Remind.vue'
import Medication from './Medication.vue'
import Warning from './Warning.vue'
import Diet from './Diet.vue'
import Sport from './Sport.vue'
// import Editor from './editor.vue'

import { getDietDict } from '@/api/template'
import { theme, Modal } from 'ant-design-vue'
const { useToken } = theme
const { token } = useToken()

const route = useRoute()

const tabs = {
  // Manage,
  Health,
  Education,
  Follow,
  Monitor,
  Remind,
  Medication,
  Warning,
  Diet,
  Sport
  // Editor
}
const activeKey = ref('Health')

const tabChange = (e) => {
  setUrlParams({
    key: e
  })
}

const dietDictData = ref([])

onMounted(() => {
  if (route.query.key) {
    activeKey.value = route.query.key
  }

  getDietDict().then((res) => {
    res.data.map((item) => {
      item.label = item.name
      item.value = item.id
      item.list.map((child) => {
        child.label = child.dietName
        child.value = child.dietName
      })
      item.options = item.list
    })
    dietDictData.value = res.data
    // console.log(dietDictData.value)
    sessionStorage.setItem('dietDictData', JSON.stringify(dietDictData.value))
  })
})

// const show = () => {
//   Modal.confirm({
//     title: '标签操作',
//     content: '123',
//     closable: true,
//     onOk() {

//     },
//     onCancel() {}
//   })
// }
</script>

<style lang="less" scoped>
.page {
  padding: 0;
  overflow: hidden;
}

.main {
  height: calc(100vh - 96px);
  padding: 16px;
  overflow: hidden auto;

  .content {
    height: 100%;

    ::v-deep(.ant-card-body) {
      height: 100%;
      padding: 16px;
      display: flex;
      flex-direction: column;
    }
  }
}

.tabs {
  width: 100%;

  ::v-deep(.ant-tabs-nav) {
    margin: 0;
  }

  ::v-deep(.ant-tabs-nav-wrap) {
    padding: 0 20px;
    padding-top: 2px;
    height: 48px;
  }
}

.ant-form .ant-input {
  width: 100% !important;
}
</style>
